<template>
  <div class="app-layout-nav-bar">{{ title }}</div>
</template>

<script setup lang="ts">
import { RouteLocationMatched } from 'vue-router'

const currentRoute = useRoute()
const breadcrumbs = ref<Array<RouteLocationMatched>>([])
const title = computed(() => {
  let title = ''
  breadcrumbs.value.forEach((item) => {
    title += item.meta.title + '/'
  })
  return title.substring(0, title.length - 1)
})
const getBreadcrumb = () => {
  // 获取当前路由的匹配项
  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
  breadcrumbs.value = matched.filter((item) => {
    return item.meta && item.meta.title && item.meta.breadcrumb !== false
  })
}

watch(() => currentRoute.path, getBreadcrumb)
onBeforeMount(() => {
  getBreadcrumb()
})
</script>

<style lang="scss" scoped>
.app-layout-nav-bar {
  background-color: $color_2;
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>
